import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import {
    Button,
    DatePicker,
    Form,
    Input,
    Modal,
    Radio,
    Tag,
    Select,
    InputNumber,
    message,
    Row,
    Checkbox,
    Col,
    Divider,
} from 'antd';
import { modalLayoutLg, modalLayoutMd, modalLayoutSm } from '@/config/layout';
import { request } from 'umi';
const CheckboxGroup = Checkbox.Group;
const IndustryRacetrack = (props: any, refs: any) => {

    const [list, setlist] = useState([]);
    const [checkedList, setCheckedList] = useState({});
    const getData = () => {
        request(props.url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            data: {},
        }).then((res) => {
            let data = res?.data || [];

            // props.value
            let listObj = {

            };
            data.map((e, i) => {
                console.log('props');
                console.log(props)
                listObj[e.id] = [];
                let racetrackIds = props?.racetrackIds || [];
                let racetrackBOList = e?.racetrackBOList || [];
                racetrackBOList.map((el, il) => {
                    if (racetrackIds.indexOf(el.id) != -1) {
                        listObj[e.id].push(el.id)
                    }
                })
            })
            setlist(data);
            setCheckedList(listObj);
        });
    }
    useEffect(() => {
        getData();
    }, [])
    const getindeterminate = (id: any, list: any) => {
        console.log(id);
        return;
    }
    const getcheckAll = (e: any, id: any) => {
        return
    }
    const onCheckAllChange = (event, id, list) => {
        console.log(event.target.checked);
        let industryIdsn = props.industryIds.concat([]);
        console.log(id);
        if (event.target.checked) {
            industryIdsn.push(id)
        } else {
            industryIdsn.splice(industryIdsn.indexOf(id), 1);
        }
        props.callBack({
            industryIds: industryIdsn,
            racetrackIds: props.racetrackIds
        });


        setTimeout(() => {
            let listids = list.map(item => item.id)
            setCheckedList({
                ...checkedList,
                ...{
                    [id]: event.target.checked ? listids : []
                }
            });
        }, 200);
    }
    const onChange = (checkeds: any, id) => {
        setCheckedList({
            ...checkedList,
            ...{
                [id]: checkeds
            }
        });

    };
    useEffect(() => {
        console.log(checkedList);
        let industryIdsn: any[] = [];
        let racetrackIds = [];
        for (let i in checkedList) {
            if (checkedList[i].length > 0) {
                industryIdsn.push(i);
                racetrackIds = racetrackIds.concat(checkedList[i])
            }
        }
        industryIdsn = industryIdsn.concat(props.industryIds);

        industryIdsn = [...new Set(industryIdsn)];
        // OnChange(values);
        props.callBack({
            industryIds: industryIdsn,
            racetrackIds
        });
    }, [checkedList])

    return (
        <div>
            {
                list.map((e: any, i) => {
                    let racetrackBOList = e?.racetrackBOList || [];
                    let id = e?.id || '';
                    let chedkedItem = checkedList[id] || [];
                    return <div key={i} style={{ paddingBottom: '20px', marginBottom: '15px', borderBottom: '1px solid #ddd' }}>
                        <div>
                            <Checkbox
                                indeterminate={racetrackBOList.length == 0 ? false : (chedkedItem.length > 0 && chedkedItem.length < racetrackBOList.length)}
                                onChange={(event) => onCheckAllChange(event, e.id, racetrackBOList)}
                                checked={props.industryIds.indexOf(id) != -1}
                            >
                                {e.name}
                            </Checkbox>
                        </div>
                        <div>
                            <CheckboxGroup value={checkedList[id]} onChange={(checkeds: any) => {
                                onChange(checkeds, e.id)
                            }}>
                                {racetrackBOList.map((el, il) => {
                                    return <Checkbox value={el.id}>{el.name}</Checkbox>
                                })}
                            </CheckboxGroup>
                        </div>

                    </div>
                })
            }
        </div>
    );
};
const IndustryRacetrackCom = forwardRef(IndustryRacetrack);

export default IndustryRacetrackCom;
